<template>
  <div>
    <div class="statistical-information">
      <span class="statistical-title">总件数：</span>
      <span class="statistical-number">{{ calculateSum.pkgsSum }}</span>
      <span class="statistical-title">总毛重：</span>
      <span class="statistical-number">{{ calculateSum.weightSum }}</span>
      <span class="statistical-title">总体积：</span>
      <span class="statistical-number">{{ calculateSum.volumSum }}</span>
    </div>
    <el-form
      :model="detailData"
      label-width="0"
      label-suffix="："
      ref="tableFormRef"
      :show-message="false"
    >
      <el-table
        :data="detailData.containers"
        border
        max-height="400px"
        size="small"
        ref="table"
        @cell-click="cellClick"
        highlight-current-row
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column
          align="center"
          label="箱号"
          width="120"
          show-overflow-tooltip
        >
          <template #header>
            <div class="table-header">箱号</div>
          </template>
          <template #default="scope">
            {{ scope.row.containerNo }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="封号"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.sealNo }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="箱型"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerSize }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="件数" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.pkgs }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="重量(KGS)" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.weight }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="体积(CBM)"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.measurement }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="称重方式"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.weighingType }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="称重地点"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.weighingLocation }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="责任方"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.vgmDuty }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="责任人签名"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.vgmPerson }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="联系电话"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.vgmMobile }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="联系邮箱"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.vgmEmail }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="editRowData(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog
      :title="dialogData.title"
      v-model="dialogData.show"
      width="1007px"
    >
      <div class="container-table">
        <div class="item item-layout">
          <div class="label-item">箱号</div>
          <div class="content-item">{{ formData.containerNo }}</div>
        </div>
        <div class="item item-layout">
          <div class="label-item">箱型</div>
          <div class="content-item">
            {{ formData.containerSize }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">箱属箱皮重</div>
          <div class="content-item-split">
            <div style="width: 50%">{{ formData.containerOwner }}</div>
            <div style="width: 50%">{{ formData.tareWeight }}</div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">封号</div>
          <div class="content-item">
            {{ formData.sealNo }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装箱方式</div>
          <div class="content-item">{{ formData.packingType }}</div>
        </div>
        <div class="item item-layout">
          <div class="label-item">免用箱备注</div>
          <div class="content-item">{{ formData.freeBoxRemark }}</div>
        </div>
        <div class="item item-layout" style="width: 100%">
          <div class="label-item">箱单地点</div>
          <div class="content-item">
            {{ formData.packingLocation }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">码头</div>
          <div class="content-item">
            {{ formData.wharf }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">提箱时间</div>
          <div class="content-item">
            {{
              formData.carryContainerTime
                ? $utils.formatDateTime(
                    formData.carryContainerTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">仓库</div>
          <div class="content-item">
            {{ formData.warehouse }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装箱时间</div>
          <div class="content-item">
            {{
              formData.packingTime
                ? $utils.formatDateTime(formData.packingTime, 'YYYY-MM-DD')
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">车队</div>
          <div class="content-item">
            {{ formData.motorcade }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">进港时间</div>
          <div class="content-item">
            {{
              formData.enterPortTime
                ? $utils.formatDateTime(formData.enterPortTime, 'YYYY-MM-DD')
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">联系信息</div>
          <div class="content-item-split">
            <div style="width: 50%">{{ formData.motorcadeContact }}</div>
            <div style="width: 50%">{{ formData.motorcadeTelephone }}</div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装船时间</div>
          <div class="content-item">
            {{
              formData.loadingShipTime
                ? $utils.formatDateTime(formData.loadingShipTime, 'YYYY-MM-DD')
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">派车信息</div>
          <div class="content-item-split">
            <div style="width: 33.33%">{{ formData.packingContact }}</div>
            <div style="width: 33.33%">{{ formData.packingTelephone }}</div>
            <div style="width: 33.33%">{{ formData.motorcadeTelephone }}</div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">还箱时间</div>
          <div class="content-item">
            {{
              formData.returnTime
                ? $utils.formatDateTime(formData.returnTime, 'YYYY-MM-DD')
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">件数</div>
          <!-- <div class="content-item-split">
            <div style="width: 50%">{{ formData.pkgs }}</div>
            <div style="width: 50%">{{ formData.packingTelephone }}</div>
          </div> -->
          <div class="content-item">
            {{ formData.pkgs }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">毛重(KGS)</div>
          <div class="content-item">
            {{ formData.weight }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">体积(CBM)</div>
          <div class="content-item">
            {{ formData.measurement }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">称重方式</div>
          <div class="content-item">
            {{ formData.weighingType }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">称重地点</div>
          <div class="content-item">
            {{ formData.weighingLocation }}
          </div>
        </div>
        <div class="item item-layout" style="width: 100%">
          <div class="label-item">VGM责任方</div>
          <div class="content-item">
            {{ formData.vgmDuty }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM责任人</div>
          <div class="content-item">
            {{ formData.vgmPerson }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM电话</div>
          <div class="content-item">
            {{ formData.vgmMobile }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM邮箱</div>
          <div class="content-item">
            {{ formData.vgmEmail }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, inject, toRaw } from 'vue'
// import selectDown from './../components/selectDown.vue'
import selectDown from './selectDownNew.vue'
import childTable from './../components/docDetailBoxTableChild.vue'
import {
  validateOnlyNumberTwo,
  validateNumber,
  checkEmailType,
  validataPhoneAndTelephone
} from '@/utils/validate.js'
import docSelects from '../components/docSelects.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  components: {
    selectDown,
    docSelects,
    childTable
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //详细数据副本
    detailDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:detailData'],
  computed: {
    // data: {
    //   get() {
    //     return this.detailData
    //   },
    //   set(value) {
    //     this.$emit('update:detailData', value)
    //   }
    // }
  },
  data() {
    return {
      // 集装箱数据
      boxTableData: [],
      tableSelect: [],
      calculateSum: {
        pkgsSum: 0,
        weightSum: 0,
        volumSum: 0
      },
      dialogData: {
        title: '集装箱信息',
        show: false
      },
      currentRow: [],
      // 用于autocompelte组件
      timeout: null,
      formData: {
        // 箱信息
        containerNo: '', //箱号
        sealNo: '', //封号
        containerSize: '', //箱型
        containerOwner: '', //箱属
        tareWeight: '', //箱皮重
        packingType: '', //装箱方式
        freeBoxRemark: '', //免用箱备注
        packingLocation: '', //箱单地点
        pkgs: '', //件数
        weight: '', //毛重
        measurement: '', //体积
        weighingType: '', //称重方式
        weighingLocation: '', //称重地点
        vgmDuty: '', //VGM责任方
        vgmPerson: '', //VGM责任人
        vgmMobile: '', //VGM电话
        vgmEmail: '', //VGM邮箱
        // 拖车信息
        wharf: '', //码头.
        warehouse: '', //仓库
        motorcade: '', //车队.
        motorcadeContact: '', //联系信息.
        motorcadeTelephone: '', //联系信息.
        packingContact: '', //联系信息.
        packingTelephone: '', //联系信息.
        carryContainerTime: '', //提箱时间.
        packingTime: '', //装箱时间.
        enterPortTime: '', //进港时间.
        loadingShipTime: '', //装船时间.
        returnTime: '' //还箱时间.
      }
    }
  },
  methods: {
    validateNumber,
    validateOnlyNumberTwo,
    validataPhoneAndTelephone,
    //单元格被点击时会触发该事件
    async cellClick(row, column, cell, event) {
      // 点击操作和复选框列，不做选中处理
      if (column.label != '操作' && column.no != 0) {
        // for (let i = 0; i < this.detailData.containers.length; i++) {
        //   let t = this.detailData.containers[i]
        //   if (t.id == row.id) {
        //     this.rowIndex = i
        //   }
        // }
        row.rowIndex = this.rowIndex + 1
        if (row.containerNo) {
          this.$refs.table.setCurrentRow(row)
          this.$emit('setBoxNumber', row)
          this.currentRow = row
        }
      }
      if (!row.id) {
        if (this.currentRow) {
          for (const iterator of this.detailData.containers) {
            if (this.currentRow.id == iterator.id) {
              this.$refs.table.setCurrentRow(iterator)
            }
          }
        } else {
          this.$refs.table.setCurrentRow()
        }
        return
      }
      if (this.currentRow) {
        for (const iterator of this.detailData.containers) {
          if (this.currentRow.id == iterator.id) {
            this.$refs.table.setCurrentRow(iterator)
          }
        }
      } else {
        this.$refs.table.setCurrentRow()
      }
    },
    // // 编辑数据
    editRowData(row) {
      this.formData = row
      this.dialogData.show = true
    }
    // cancel() {
    //   this.dialogData.show = false
    // }
  },
  watch: {
    'detailData.containers': {
      handler(newVal, oldVal) {
        this.calculateSum = {
          pkgsSum: 0,
          weightSum: 0,
          volumSum: 0
        }
        for (const iterator of this.detailData.containers) {
          this.calculateSum.pkgsSum += iterator.pkgs
            ? parseInt(iterator.pkgs)
            : 0
          this.calculateSum.weightSum += iterator.weight
            ? parseFloat(iterator.weight)
            : 0
          this.calculateSum.volumSum += iterator.measurement
            ? parseFloat(iterator.measurement)
            : 0
        }
      },
      deep: true, // 深度侦听(对象里面层的值改变)
      immediate: true // 立即侦听(网页打开handler执行一次)
    }
  },
  mounted() {}
})
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border-radius: 2px;
  background: #f1f8ff;
  padding: 4px 16px;
  :deep(.el-button--small) {
    padding: 0;
  }

  :deep(.el-button + .el-button) {
    margin-left: 16px;
  }
}

:deep(.el-table) {
  .el-table__header th {
    background-color: #f7f8fa;
  }
  .cell {
    height: 32px;
    line-height: 32px;
  }

  .el-table__cell {
    padding: 0;
    height: 32px;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }
    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input__inner {
    padding: 0 8px;
  }
  .el-date-editor {
    .el-input__prefix {
      display: none;
    }
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(90, 156, 248, 0.4) !important;
  }
}

:deep(.el-dialog) {
  padding: 0px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px;
  }

  .el-dialog {
    padding: 0px;
  }
}

.item {
  width: 33.33%;
}

.statistical-information {
  border-radius: 2px;
  background: #fef3e8;
  border: 1px solid #ffd1a0;
  padding: 4px 16px;
  margin-bottom: 8px;

  .statistical-title {
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
  }
  .statistical-number {
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-right: 16px;
  }
}

.line-separate {
  background: #e7e7e7;
  height: 1px;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
}

// :deep(.el-checkbox) {
//   height: 100%;
// }
</style>
